import { Component,ChangeDetectionStrategy, EventEmitter, OnInit, ElementRef, Input, Output } from '@angular/core';
import { SafeStyle, DomSanitizer } from '@angular/platform-browser';
import { ElementuiService } from './../elementui.service';

@Component({
  selector: 'el-button',
  templateUrl: './buttons.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonsComponent implements OnInit {
  private el: any;
  private sanitizer: any;
  //是否禁用状态
  @Input() disabled: boolean = false;
  //类型 primary / success / warning / danger / info / text
  @Input() type: string = '';
  //尺寸 medium / small / mini
  @Input() size: string = '';
  //是否朴素按钮
  @Input() plain: boolean = false;
  //是否圆角按钮
  @Input() round: boolean = false;
  //是否圆形按钮
  @Input() circle: boolean = false;
  //是否加载中状态
  @Input() loading: boolean = false;
  //图标类名
  @Input() icon: string = '';
  //原生 type 属性 button / submit / reset
  @Input('native-type') nativeType: string = 'button';
  //是否默认聚焦
  @Input() autofocus: boolean = false;
  @Input() style: string = '';
  @Input('class') nativeClass: string = ' ';
  @Output('click') clickModel: EventEmitter<any> = new EventEmitter<any>();


  constructor(el: ElementRef, sanitizer: DomSanitizer, private ElementuiService: ElementuiService) {
    this.sanitizer = sanitizer;
    this.el = el;
    this.nativeClass += this.el.nativeElement.classList.value;
   
  };

  ngOnInit(): void {
    this.ElementuiService.removeNgTag(this.el.nativeElement);
  }



  clickHandle($event: any) {
    this.clickModel.emit($event);
  }

  extendStyles() {
    return this.sanitizer.bypassSecurityTrustStyle(this.style);
  }

  sizeClass() {
    return this.size ? ' el-button--' + this.size : '';
  }

  typeClass() {
    return this.type ? '  el-button--' + this.type : '';
  }

  plainClass() {
    return this.plain === true ? ' is-plain' : '';
  }

  loadingClass() {
    return this.loading === true ? ' is-loading' : '';
  }

  roundClass() {
    return this.round === true ? ' is-round' : '';
  }

  circleClass() {
    return this.circle === true ? ' is-circle' : '';
  }

  disabledClass() {
    return this.disabled === true ? ' is-disabled' : '';
  }


}
